<template>
  <div class="login">
    <div class="logo">
      <img src="../assets/logo.png" alt="">
      <p>爱闪信</p>
    </div>
    <div class="back"></div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-position="top">
      <p class="text">用户登录</p>
      <el-form-item label="手机号：" prop="iphone">
        <el-input class="input1" v-model.number="ruleForm.iphone" autocomplete="off" autofocus maxlength="11" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <div class="l-captcha" data-site-key="d84238a1daf73fe0603008d1c26bd2dd" data-width="100%" data-callback="getResponse"></div>
      <el-form-item label="验证码：" prop="code">
        <el-input class="input2" v-model.number="ruleForm.code" maxlength="6" placeholder="请输入验证码"></el-input>
        <el-button :type="type" @click="sendCode" :disabled="codeonOff">{{message}}</el-button>
      </el-form-item>
      <el-button type="primary" size="medium" @click="submitForm('ruleForm')">立即登录</el-button>
    </el-form>
  </div>
</template>

<script>
  import {getCookie,setCookie} from './until/index'
  window.rejcode = ''
export default {
  data () {
    var validateiphone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数值'))
        } else {
          if (value.toString().length !== 11) {
            callback(new Error('请输入正确手机号'))
          } else {
            callback()
          }
        }
      }, 1000)
    }
    var checkCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'))
      } else {
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数值'))
          } else {
            callback()
          }
        }, 1000)
      }
    }
    return {
      type: 'primary',
      message: '发送验证码',
      codeonOff: false,
      number: 60,
      code:'',
      rejcode:'',
      ruleForm: {
        iphone: '',
        code: ''
      },
      rules: {
        iphone: [
          { validator: validateiphone, trigger: 'blur' }
        ],
        code: [
          { validator: checkCode, trigger: 'blur' }
        ]
      }
    }
  },
  mounted: () => {
    var c = document.createElement('script')
    c.type = 'text/javascript'
    c.async = true
    c.id = 'script'
    c.src = (document.location.protocol === 'https:' ? 'https://' : 'http://') + 'captcha.luosimao.com/static/dist/captcha.js?v=201805071004'
    var s = document.getElementsByTagName('script')[0]
    s.parentNode.insertBefore(c, s)
  },
  created () { //组件创建后，数据已经完成 初始化 但dom还未生成
    window.getResponse = (resp)=>{
      this.rejcode = resp  
      rejcode = resp
    }
    
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        
        if (valid) {

            this.$ajax.get('quickLogin.ashx?mobile='+this.ruleForm.iphone+'&code='+this.ruleForm.code)
              .then(res=>{

                var data = res.data.data
                if(res.data.code == 200){
                  
                  setCookie('token',data.token,5)
                  setCookie('userid',data.userID,5)
                  
                  this.$message({
                    message: '登陆成功',
                    type: 'success',
                    onClose:()=>{
                      this.$router.push({
                        path:'/admin'
                      })
                      window.location.reload()
                    }
                  })
                }else{
                  this.$message.error(res.data.msg);
                }
                
              })
              .catch(error=>{

                this.$message({
                  message: '登录失败',
                  type: 'warning'
                })
              })
          
        } else {

          console.log('error')
          return false
        }
      })
    },
    
    sendCode () {
      var timer = null
      clearInterval(timer)
      this.rejcode = document.getElementById('lc-captcha-response').value
      
      if (/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(this.ruleForm.iphone)) {
        //  if(this.rejcode){
            // +'&validCode='+this.rejcode
            this.$ajax.get('sendVerificationCode.ashx?mobile='+this.ruleForm.iphone)
              .then(res=>{

                if(res.data.code === '200'){

                  this.$message({
                    message: '发送成功',
                    type: 'success'
                  })
                  this.type = 'info'
                  var that = this
                  timer = setInterval(function () {
                    that.number--
                    that.message = that.number + '秒后发送'
                    if (that.number <= 0) {
                      clearInterval(timer)
                      that.message = '发送验证码'
                      that.codeonOff = false
                      that.type = 'primary'
                    } else {
                      that.codeonOff = true
                    }
                  }, 1000)
                }else{
                  
                  this.$message.error(res.data.msg)
                }
                
              })
              .catch(error=>{

                console.log(error)
              })

        // }else{
        //   this.$message.error('请完成人机验证！');
        // }
        
      } else {
        this.$message.error('手机号不正确');
      }
    }
  }
}

</script>
<style scoped>
body{
  background: #f5f5f5
}
.text{
  font-size: 26px;
  color: #666;
  font-weight: bold;
  margin:0 auto 10px;
}
label {
  line-height: 30px
}
.el-form-item{
  text-align: left;
}
.l-captcha{
  padding-top: 10px;
  padding-bottom: 10px
}
.input2{
  margin-right: 13px;
  width: 250px;
  vertical-align: top;
}
.el-main{
  z-index: 100;
}
.login{
  width: 475px;
  margin: 20px auto 0;
  z-index: 999;
}
.logo{
  width: 100%;
  margin-bottom: 10px;
  z-index: 999;
}
.logo img{
  width: 60px;
  height: 60px;
  display: block;
  margin: 0 auto;
}
.logo p{
  font-size: 16px;
  color: #fff;
}

.el-form{
  border-radius: 3px;
  background: #fff;
  padding: 30px 45px;
  z-index: 100;
}
.el-button--medium{
  padding: 15px 0;
  width: 100%;
}
.back{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 580px;
    background-image: url(../assets/letter_back.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}
</style>
